//豆包生成的代码
<template>
  <!-- 保留仿微信的聊天界面布局 -->
  <view class="chat-container">
    <!-- 聊天记录区域 - 使用仿微信的UI -->
    <scroll-view 
      class="chat-messages" 
      scroll-y 
      :scroll-with-animation="false"
      :scroll-top="scrollTop"
      @scroll="onScroll"
    >
      <view class="message-list">
        <!-- 这里使用uni-im的消息渲染逻辑，但保留仿微信的消息气泡样式 -->
        <view 
          v-for="(msg, index) in messages" 
          :key="index"
          :class="['message-item', msg.fromMe ? 'me' : 'other']"
        >
          <image 
            class="avatar" 
            :src="msg.avatar" 
            mode="widthFix"
          ></image>
          <view class="message-bubble">
            <!-- 根据消息类型显示不同内容 -->
            <text v-if="msg.type === 'text'" class="text-message">{{msg.content}}</text>
            <image 
              v-if="msg.type === 'image'" 
              :src="msg.content" 
              class="image-message"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 输入区域 - 使用仿微信的UI -->
    <view class="chat-input-area">
      <view class="input-toolbar">
        <button class="tool-btn" @click="chooseImage">
          <image src="/static/icons/image.png" mode="widthFix"></image>
        </button>
        <!-- 其他工具按钮 -->
      </view>
      <view class="input-container">
        <textarea 
          v-model="inputMessage" 
          class="message-input"
          placeholder="请输入消息..."
          @input="autoResize"
        ></textarea>
        <button 
          class="send-btn"
          @click="sendMessage"
          :disabled="!inputMessage.trim()"
        >
          发送
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputMessage: '',
      messages: [],
      scrollTop: 0,
      // 记录当前聊天对象
      targetUserId: ''
    }
  },
  onLoad(options) {
    // 获取聊天对象ID
    this.targetUserId = options.userId
    
    // 初始化uni-im消息监听
    this.initIMListener()
    
    // 加载历史消息 - 使用uni-im的API
    this.loadHistoryMessages()
  },
  methods: {
    // 初始化IM消息监听
    initIMListener() {
      // 监听新消息
      this.$uniIm.on('message', (message) => {
        // 判断是否是当前聊天对象的消息
        if (message.fromUserId === this.targetUserId) {
          this.messages.push({
            ...message,
            fromMe: false
          })
          this.scrollToBottom()
        }
      })
    },
    
    // 加载历史消息
    async loadHistoryMessages() {
      try {
        const res = await this.$uniIm.getHistoryMessages({
          targetUserId: this.targetUserId,
          pageSize: 20
        })
        
        // 格式化消息数据以适应仿微信界面
        this.messages = res.messages.map(msg => ({
          ...msg,
          fromMe: msg.fromUserId === this.$uniIm.userInfo.userId,
          avatar: msg.fromMe ? '/static/avatar/me.png' : `/static/avatar/${msg.fromUserId}.png`
        }))
        
        this.scrollToBottom()
      } catch (e) {
        console.error('加载历史消息失败', e)
      }
    },
    
    // 发送消息
    async sendMessage() {
      if (!this.inputMessage.trim()) return
      
      try {
        // 使用uni-im发送消息
        const result = await this.$uniIm.sendMessage({
          targetUserId: this.targetUserId,
          type: 'text',
          content: this.inputMessage
        })
        
        // 发送成功后添加到消息列表
        this.messages.push({
          ...result,
          fromMe: true,
          avatar: '/static/avatar/me.png'
        })
        
        // 清空输入框并滚动到底部
        this.inputMessage = ''
        this.scrollToBottom()
      } catch (e) {
        console.error('发送消息失败', e)
        uni.showToast({
          title: '发送失败',
          icon: 'none'
        })
      }
    },
    
    // 选择图片并发送
    async chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          const tempFilePath = res.tempFilePaths[0]
          
          // 可以先显示一个加载中的消息
          const loadingMsgId = Date.now()
          this.messages.push({
            id: loadingMsgId,
            fromMe: true,
            type: 'loading',
            avatar: '/static/avatar/me.png'
          })
          
          try {
            // 上传图片并发送
            const result = await this.$uniIm.sendImageMessage({
              targetUserId: this.targetUserId,
              imagePath: tempFilePath
            })
            
            // 替换加载中的消息为实际图片消息
            const index = this.messages.findIndex(msg => msg.id === loadingMsgId)
            if (index !== -1) {
              this.messages.splice(index, 1, {
                ...result,
                fromMe: true,
                avatar: '/static/avatar/me.png'
              })
            } else {
              this.messages.push({
                ...result,
                fromMe: true,
                avatar: '/static/avatar/me.png'
              })
            }
            
            this.scrollToBottom()
          } catch (e) {
            console.error('发送图片失败', e)
            // 移除加载中消息
            const index = this.messages.findIndex(msg => msg.id === loadingMsgId)
            if (index !== -1) {
              this.messages.splice(index, 1)
            }
            uni.showToast({
              title: '发送图片失败',
              icon: 'none'
            })
          }
        }
      })
    },
    
    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        this.scrollTop = 999999
      })
    },
    
    // 自动调整输入框高度
    autoResize(e) {
      // 实现输入框高度自适应逻辑
    },
    
    onScroll(e) {
      // 处理滚动事件，如加载更多历史消息
    }
  },
  onUnload() {
    // 移除消息监听
    this.$uniIm.off('message')
  }
}
</script>

<style scoped>
/* 保留仿微信的聊天界面样式 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.chat-messages {
  flex: 1;
  padding: 16rpx;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.message-item {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.message-item.me {
  flex-direction: row-reverse;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
}

.message-bubble {
  max-width: 60%;
  padding: 20rpx;
  border-radius: 20rpx;
  word-break: break-all;
}

.message-item.other .message-bubble {
  background-color: #ffffff;
}

.message-item.me .message-bubble {
  background-color: #95ec69;
}

.text-message {
  font-size: 28rpx;
  line-height: 1.5;
}

.image-message {
  max-width: 100%;
  border-radius: 10rpx;
}

.chat-input-area {
  border-top: 1px solid #eee;
  background-color: #fff;
  padding: 16rpx;
}

.input-toolbar {
  display: flex;
  gap: 20rpx;
  margin-bottom: 16rpx;
}

.tool-btn {
  width: 56rpx;
  height: 56rpx;
  background: none;
  border: none;
  padding: 0;
}

.tool-btn image {
  width: 100%;
  height: 100%;
}

.input-container {
  display: flex;
  gap: 16rpx;
  align-items: center;
}

.message-input {
  flex: 1;
  min-height: 80rpx;
  max-height: 200rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
}

.send-btn {
  width: 120rpx;
  height: 60rpx;
  background-color: #07c160;
  color: #fff;
  border-radius: 30rpx;
  font-size: 28rpx;
  line-height: 60rpx;
}

.send-btn:disabled {
  background-color: #ccc;
}
</style>
